<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet">
    <style>
        #logo img {
            display: block;
            width: 200px;
            height: 200px;
        }
    </style>
</head>

<body>
    <!-- bootstrap 好快 PC 框架 -->
    <!-- 网页布局 -->
    <div class="container">
        <div class="row">
            <div class="col-md-6 col-md-offset-3">
                <form name="logoForm">
                    <div class="form-group">
                        <label for="titleInput">Bot名称：</label>
                        <input type="text" class="form-control" id="titleInput" name="title" placeholder="Bot名称"
                            requried>
                    </div>
                    <div class="form-group">
                        <label for="descInput">Bot介绍：</label>
                        <textarea class="form-control" name="desc" id="descInput" placeholder="请输入Bot介绍">
                        </textarea>
                    </div>
                    <div class="form-group">
                        <button type="submit" class="btn btn-primary">生成图标</button>
                    </div>
                </form>
            </div>
            <div class="row" id="logo">

            </div>
        </div>
    </div>
    <script>
        const oForm = document.forms['logoForm'];
        const oLogo = document.getElementById('logo');
        oForm.addEventListener('submit', function (event) {
            event.preventDefault();
            const title = this['title'].value.trim();//this.title.value.trim()
            const desc = this['desc'].value.trim()
            // console.log(title, desc, '///////////');

            if (title) {
                const data = {
                    title,
                    desc
                }
                //post 提交表单
                fetch('http://localhost:3000/logo', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    //请求体是字符串或二进制文件  stringify可以把队列直接数据化
                    body: JSON.stringify(data)
                })
                    .then(res => res.json())
                    .then(data => {
                        // console.log(data)
                        if (data.code == 200) {
                            const { url } = data
                            const oImg = document.createElement('img');
                            oImg.src = url
                            oLogo.onload = function () {
                                document.getElementById('logo').appendChild(oImg)
                            }
                        } else {
                            console.log('出错了');
                        }
                    })
            }
        })
    </script>
</body>

</html>